<template>
  <div style="padding: 0.2rem">
    <div class="title1">
      <label>参与活动人员名称：</label>
      <el-input v-model="name" placeholder="请输入参与活动人员名称" /><span
        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
      >
      <label>活动名称：</label>
      <el-input v-model="activity_name" placeholder="请输入活动名称" /><span
        >&nbsp;&nbsp;&nbsp;</span
      >
      <label>获取的奖品：</label>
      <el-input v-model="activity_jiangpin" placeholder="请输入要查找的奖品" /><span
        style="color: black"
      ></span>
      <div>
        <label for="">请选择奖品是否领取：</label>
        <el-radio-group v-model="activity_jiangpin_istrue">
          <el-radio :value="true">已领取</el-radio>
          <el-radio :value="false">未领取</el-radio>
        </el-radio-group>
      </div>

      <br />
      <div class="buttom">
        <el-button type="primary" @click="getcommodity()">搜索</el-button>
        <el-button type="primary" @click="clear()">清空</el-button>
      </div>
    </div>

    <el-table :data="show_list" style="width: 100%; box-shadow: 0 0 0.05rem #ccc; color: black">
      <el-table-column  fixed prop="name" label="参与活动人员名称" width="200" />
      <el-table-column prop="phone" label="联系方式" width="120" />
      <el-table-column prop="time" label="参与活动时间" width="250" />

      <el-table-column prop="activity_name" label="参与活动名称" width="120" />
      <el-table-column prop="activity_jiangpin" label="参与活动奖品" width="200" />
      <el-table-column prop="activity_image" label="参与活动奖品图片" width="200">
        <template v-slot="scope">
          <img :src="scope.row.activity_image" style="width: 100px; height: 100px" />
        </template>
      </el-table-column>
      <el-table-column prop="activity_jiangpin_istrue" label="参与活动奖品是否领取" width="120">
        <template v-slot="scope">
          <span>{{ scope.row.activity_jiangpin_istrue ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="activity_jiangpin_time" label="活动奖品领取过期时间" width="200" />

      <el-table-column fixed="right" label="操作" min-width="120">
        <template v-slot="scope">
          <el-button link type="primary" size="small" @click="handleClick"> 修改</el-button>
          <el-button link type="primary" size="small" @click="del_item(scope.row._id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[4, 6, 8, 12]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
    
  <script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { updata_commodityistrue, get_user_list,delitem } from '@/request/api/api.ts'
const tableData = ref([])
const name = ref('')
const activity_name = ref('')
const activity_jiangpin = ref('')
const activity_jiangpin_istrue = ref('')

onMounted(() => {
  getcommodity()
})
// 获取参与活动人员列表
const getcommodity = async () => {
  const data: any = await get_user_list({
    name: name.value,
    activity_name: activity_name.value,
    activity_jiangpin: activity_jiangpin.value,
    activity_jiangpin_istrue: activity_jiangpin_istrue.value
  })
  tableData.value = data.data
}
// 清空搜索框
const clear = () => {
  ;(name.value = ''),
    (activity_name.value = ''),
    (activity_jiangpin.value = ''),
    (activity_jiangpin_istrue.value = '')
}

const del_item = async (id: any) => {
  let data = await delitem({_id:id})
  if(data.code ==200){
    ElMessage({
      message: `${data.msg}`,
      type: 'success'
    })
    getcommodity()
  }
}



const handleClick = () => {
  console.log('click')
}

const currentPage4 = ref(1)
const pageSize4 = ref(4)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const show_list = computed(() => {
  return tableData.value.slice(
    (currentPage4.value - 1) * pageSize4.value,
    currentPage4.value * pageSize4.value
  )
})

const handleSizeChange = (val: number) => {
  pageSize4.value = val
  // console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  currentPage4.value = val
  // console.log(`current page: ${val}`)
}
</script>
  
  <style lang="scss" scoped>
.title1 {
  box-sizing: border-box;
  width: 100%;
  background-color: white;
  // padding: 20px;
  margin-bottom: 20px;
}
.demo-pagination-block {
  padding: 0.1rem;
  margin-top: 0.2rem;
  float: right;
}
.title1 .el-input {
  width: 300px;
  height: 40px;
  margin-bottom: 0.1rem;
}

.buttom .el-button {
  width: 80px;
  height: 30px;
}
</style>